On this page

、와 ー는 각각 별도의 유니코드 문자
lang="ja"
font-family에 적었다고 그 폰트가 그렸다는 뜻은 아님
word-break: keep-all을 일본어에 그대로 쓰면 안 됨
font-feature-settings: "palt"
text-autospace / text-spacing-trim
Intl.Segmenter
"일본어 공백이 이상하다" CS가 오면 이 순서로 봄
참고

일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들

On this page

、와 ー는 각각 별도의 유니코드 문자
lang="ja"
font-family에 적었다고 그 폰트가 그렸다는 뜻은 아님
word-break: keep-all을 일본어에 그대로 쓰면 안 됨
font-feature-settings: "palt"
text-autospace / text-spacing-trim
Intl.Segmenter
"일본어 공백이 이상하다" CS가 오면 이 순서로 봄
참고

일본인 신규 입사자가 일본어 페이지 보고 피드백 줌
- "쉼표나 장음부호 앞뒤 공백이 이상하다"
- 企画、制作 에서 、 오른쪽이 비어 보여서 스페이스 문자 낀 줄 알았음
- DOM 까보니 스페이스 없음
한글 서비스만 만들 땐 마주칠 일 없던 문제라 정리해둠

、와 ー는 각각 별도의 유니코드 문자

、 = U+3001 IDEOGRAPHIC COMMA
ー = U+30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
- 둘 다 ASCII ,, -와 다른 문자
- 폰트 안에서 별도 glyph·metrics 가짐
전각 문장부호는 glyph 자체에 내부 여백(side bearing/advance) 있음
- 눈으로 봤을 때 공백처럼 보여도 실제 스페이스 문자 있는 건 아님

한국어 서비스 습관을 일본어에 그대로 가져가면 어긋나는 지점:

단어 사이에 공백이 있다는 전제
- → 일본어는 일반 문장에 띄어쓰기가 거의 없음
- → 줄바꿈 기회가 문자 사이에 존재
word-break: keep-all을 자주 씀
- → 일본어 본문에 적용하면 정상적인 CJK 줄바꿈을 막아서 overflow 생김
쉼표 , 기준으로 생각
- → 、는 전각 문장부호라 글리프 폭·여백 모델이 다름
하이픈/대시와 비슷한 선으로 인식
- → ー는 가타카나·히라가나 장음부호로 완전히 다른 문자

용어 정리 (한국어 이름으로 기억하고, 괄호 안 한자·발음은 검색 키워드로):

문장부호·기호류 (約物, やくもの, yakumono)
- 일본어 조판에서 별도 간격 규칙이 붙는 문장부호·기호류
조판 규칙 (文字組み, もじぐみ)
- 글자 배치·간격·줄바꿈을 아우르는 조판 규칙 전반
금칙 처리 (禁則処理, きんそくしょり, kinsoku shori)
- 문장부호가 줄 맨 앞/뒤에 부자연스럽게 오는 걸 막는 규칙
전각/반각 (全角/半角)
- Ａ와 A처럼 폭이 다른 문자 형태
- 검색·정규화·UI 폭 계산에 영향

lang="ja"

페이지가 일본어면 문서 루트에 lang="ja"
일부 영역만 일본어면 해당 영역에 지정
접근성·음성합성뿐 아니라 :lang(ja) 셀렉터로 일본어 전용 스타일 스코프하는 기준이 됨

<html lang="ja">
  ...
</html>

<!-- 다국어 페이지 일부만 일본어 -->
<p>
  한국어 설명
  <span lang="ja">ショート動画広告の企画、制作</span>
</p>

후리가나 필요하면 이미지나 JS로 만들지 말고 <ruby> 태그 사용

<ruby lang="ja">
  日本語<rt>にほんご</rt>
</ruby>

locale이 일본어인데 루트 lang이 계속 ko로 남아있는 경우 실무에서 은근히 있음
- 이것부터 먼저 고칠 것

font-family에 적었다고 그 폰트가 그렸다는 뜻은 아님

:lang(ja) {
  font-family:
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    "Noto Sans JP",
    sans-serif;
}

가장 중요한 확인 포인트는 glyph fallback
- 지정한 폰트가 일본어 글리프를 포함 안 하거나 웹폰트 subset에서 빠지면, 브라우저가 그 문자만 다른 폰트로 대체함
- ー, 、, 괄호 같은 기호만 다른 metrics 가진 폰트로 떨어지면 그 부분만 이질감 생김
- Chrome DevTools → Elements → Computed → Rendered Fonts 에서 문제되는 노드 직접 확인하는 게 제일 빠름
웹폰트 subset 만들 때 흔한 실수
- 가나·한자만 남기고 문장부호를 빠뜨림
- → punctuation만 system fallback으로 튀어서 폰트 안 맞아 보임
폰트 로딩 타이밍도 줄바꿈에 영향
- 일본어는 문자 단위 줄바꿈이 많아서 fallback font와 최종 font의 advance width 차이가 한 줄의 마지막 문자 위치를 바꿀 수 있음
- font-display: swap 쓴다면 CLS뿐 아니라 "첫 렌더와 로딩 후 줄바꿈이 달라지는가"도 볼 것

word-break: keep-all을 일본어에 그대로 쓰면 안 됨

일본어는 공백 없이 문장이 이어져서 브라우저가 문자 사이의 줄바꿈 기회를 판단
여기에 금칙처리 규칙까지 겹침
- 、。)]」』 같은 닫는 문장부호가 줄 맨 앞에 오는 것 피함
- ([「『 같은 여는 문장부호가 줄 맨 끝에 오는 것 피함

:lang(ja) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word; /* 긴 URL/식별자 같은 예외 대응 */
}

한국어 CSS 복사하면서 가장 자주 하는 실수 — word-break: keep-all을 일본어에도 같이 적용
- 일본어의 정상적인 CJK 줄바꿈 기회를 지나치게 없애버려서 컨테이너 폭 넘어가는 문제 생김

같은 문장을 폭 260px 박스에 넣고 비교하면 차이가 바로 보임.

word-break: normal

ショート動画広告の企画、制作という講座では、企画から編集まで一連の流れを学びます。

word-break: keep-all

ショート動画広告の企画、制作という講座では、企画から編集まで一連の流れを学びます。

keep-all 쪽은 문자 사이의 정상적인 줄바꿈 기회가 막혀서 박스 폭을 넘어가거나 한 단어처럼 취급된 구간이 삐져나옴

font-feature-settings: "palt"

OpenType feature는 폰트가 제공하는 대체 glyph·metrics를 선택하는 기능
일본어에서 자주 마주치는 태그
- palt (비례폭)
- pwid
- vert (세로쓰기용)

/* low-level: 폰트가 palt를 제공할 때만 효과가 있음 */
.jp-heading {
  font-feature-settings: "palt" 1;
}

/* 가능하면 의미가 더 분명한 상위 속성을 우선 검토 */
.jp-ui {
  font-variant-east-asian: proportional-width;
}

palt를 "일본어면 무조건 켜야 하는 옵션"으로 다루면 안 됨
- 폰트와 디자인 의도에 따라 결과 달라짐
- 이미 letter-spacing으로 자간 조정한 UI에 같이 걸면 、。 같은 문장부호 간격이 예상과 다르게 보일 수 있음
- 이 효과는 폰트가 palt 테이블을 가지고 있을 때만 나타남
  - 시스템 폰트로 비교하면 브라우저가 palt 지원 안 하는 폰트로 fallback돼서 차이가 거의 안 보일 수 있음
  - 아래 예시는 palt 확실히 지원하는 Noto Sans JP를 웹폰트로 강제 지정해서 비교

palt 없음 (Noto Sans JP)

ショート動画広告の企画、制作という講座では、

font-feature-settings: "palt" 1 (Noto Sans JP)